import React from 'react';
import Api from 'Utils/api';
import { Button, Icon, message } from 'antd';
import { connect } from 'react-redux';
import VR_TYPE from 'Constants/vrType';
import { API_HOST } from 'Constants/config';
import './../../ComplaintsReport/DetailPage/index.scss';
import CommonBorder from './../../../../DispatchPage/Components/CommonBorder';

const $ = require('jquery');

class EditPage extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      id: props.params.id,
      randomsDetail: [],
    };
    this.init = ::this.init;
    this.showState = ::this.showState;
    this.onPrint = ::this.onPrint;
  }
  componentDidMount() {
    this.init();
  }
  onPrint() {
    const area = $('div#detailBody');
    const options = {
      mode: 'iframe',
      popClose: false,
      extraCss: '',
      retainAttr: ['class', 'id', 'style', 'on'],
      extraHead: '<link type="text/css" rel="stylesheet" href="./bundle1.css" /> <link type="text/css" rel="stylesheet" href="./bundle2.css" /> ',
    };
    area.printArea(options);
  }
  showState() {
    const { randomsDetail } = this.state;
    if (randomsDetail.state === 0) {
      return '未处理';
    }
    if (randomsDetail.state === 1) {
      return '处理中';
    }
    return '已处理';
  }
  init() {
    const { id } = this.state;
    const api = new Api({
      method: 'GET',
      path: `/randoms/admin/${id}`,
      success: (json) => {
        this.setState({
          randomsDetail: json,
        });
      },
      error: (msg) => {
        message.error(msg);
      }
    });
    api.run();
  }
  renderAttachment() {
    const { randomsDetail } = this.state;
    if (randomsDetail.attachment_type === VR_TYPE.video) {
      return (
        <video controls preload className="video-ele">
          <source src={`${API_HOST}/files/${randomsDetail.attachment}`} type="video/mp4" />
        </video>
      );
    } else if (randomsDetail.attachment_type === VR_TYPE.img) {
      return (
        <img src={`${API_HOST}/files/${randomsDetail.attachment}`} alt="" className="img-ele" />
      );
    }
    return '';
  }
  render() {
    const { randomsDetail } = this.state;
    return (
      <CommonBorder
        title="你点我检详情"
        content={
          <div className="advice-detail-page">
            <div className="advice-detail-content" id="detailBody">
              <div className="item">
                <span>检查对象：</span>
                <span>{randomsDetail.company_name}</span>
              </div>
              <div className="item">
                <span>类别：</span>
                <span>{randomsDetail.type}</span>
              </div>
              <div className="item">
                <span>申请回避人员：</span>
                <span>{randomsDetail.evade_executor}</span>
              </div>
              <div className="item">
                <span>执法人员：</span>
                <div className="people">
                  <span>{randomsDetail.law_executor1}</span>
                  <span>{randomsDetail.law_executor2}</span>
                </div>
              </div>
              <div className="item">
                <span>姓名：</span>
                <span>{randomsDetail.name}</span>
              </div>
              <div className="item">
                <span>是否匿名：</span>
                <span>{randomsDetail.is_anonymity ? '是' : '否'}</span>
              </div>
              <div className="item">
                <span>身份证：</span>
                <span>{randomsDetail.id_no}</span>
              </div>
              <div className="item">
                <span>联系电话：</span>
                <span>{randomsDetail.phone}</span>
              </div>
              <div className="item">
                <span>内容：</span>
                <span>{randomsDetail.content}</span>
              </div>
              <div className="item appendix-wrap">
                <span>附件：</span>
                <span className="doc">
                  {
                    randomsDetail.attachment && randomsDetail.attachment_type ? this.renderAttachment() : ''
                  }
                  {
                    this.renderAttachment()
                  }
                </span>
              </div>
              <div className="item">
                <span>状态：</span>
                <span>{this.showState()}</span>
              </div>
              {/*<li className="item">*/}
              {/*<div>备注：</div>*/}
              {/*<div>{randomsDetail.remark}</div>*/}
              {/*</li>*/}
            </div>
            <Button className="right-btn" onClick={this.onPrint}>
              <Icon type="printer" />
              打印
            </Button>
          </div>
        }
      />
    );
  }
}
function mapStateToProps(state) {
  return {
    ...state.routing,
  };
}

export default connect(mapStateToProps)(EditPage);
